<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js 路由</title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>Hello App!</h1>
			<p>
				<router-link to='/foo'>Go to Foo</router-link>
				<router-link to='/bar'>Go to Bar</router-link>
			</p>
			<!-- 路由出口 -->
			<router-view></router-view>
		</div>
		<script>
			/* 1. 定义（路由）组件。 */
			const Foo = {template:'<div>foo</div>'},
			const Bar = {template:'<div>bar</div>'},
			
			/* 2. 定义路由 */
			const routes = [
				{path:'/foo',component:Foo},
				{path:'/bar',component:Bar}
			]
			
			/* 3. 创建 router 实例，然后传‘routes’配置 */
			const router = new VueRouter({
				routes
			})
			
			/* 4. 创建和挂载根实例 */
			const app = new Vue({
				router
			}).$mount('#app')
		</script>
	</body>
</html>
